<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex练习</title>
	<style>
		.out{
			position: relative;
			width: 300px;
			height: 300px;
			border: 1px solid #ccc;
		}
		.in{
			position: absolute;
			width: 100px;
			height: 100px;
			top: 0;
			left: 0;
			background-color: skyblue;
		}
		.pie{
		    width:140px;
		    height: 140px;
		    background: #8BC34A;
		    border-radius: 50%;
		    background-image: linear-gradient(to right,transparent 50%,#655 0);
		}
		.pie::before{
		    content: '';
		    display: block;
		    margin-left: 50%;
		    height: 100%;
		    border-radius: 0 100% 100% 0 / 50%;
		    background-color: inherit;
		    transform-origin: left;
		    transform: rotate(.1turn);/*10%*/
		    transform: rotate(.2turn);/*20%*/
		    transform: rotate(.3turn);/*30%*/
		}
		.sixWheel{
		  width:12rem;
		  height:12rem;
		  margin-left: 50px;
		  background: linear-gradient(60deg, #93f 63.4%, transparent 63.4%), linear-gradient(-60deg, #3f9 63.4%, transparent 63.4%) 100% 0, linear-gradient(-60deg, transparent 36.6%, #f63 36.6%) 0 100%, linear-gradient(60deg, transparent 36.6%, #69c 36.6%, #69c) 100% 100%, #ff9 linear-gradient(#39f, #39f) 50% 0;
		  background-repeat: no-repeat;
		  background-size: 50% 50%;
		  border-radius: 50%;
		}
		#haha{
			width: 200px;
			height: 200px;
			margin-bottom: 100px;
			background:skyblue !important;
		}
		.g-rect-path{
    fill: none;
    stroke-width:10;
    stroke:#d3dce6;
    stroke-linejoin:round;
    stroke-linecap:round;
}
 
.g-rect-fill{
    fill: none;
    stroke-width:10;
    stroke:#ff7700;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}
 
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

	#imgimg{
		text-align: center;
	}
	#imgimg img{
		width: 200px;
		height: 200px;
		border-radius: 50%;
		object-fit: cover;
	}
	@media screen and (max-width:374px){
  		#imgimg img{
    		width: 170px;
    		height: 170px;
  		}
	}
	@media screen and (min-width:750px){
  		#imgimg img{
    		width: 400px;
    		height: 400px;
  		}
}
	.donut{
		width: 50px;
		height: 50px;
		border: 5px solid #ccc;
		border-bottom-color:skyblue;
		border-radius: 50%;
		animation: donut 2s linear infinite;
	}
	@keyframes donut{
		0%{
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}
	.iampic{
		background-image: url("./img/57-151106135142.jpg");
	}
	</style>
</head>
<body>

<div class="out">
	<div class="in">
		
	</div>
</div>

<div class="iampic">
	
</div>

<input type="text" name=""><span>dasdasd</span>
 <div class="pie"></div>
 <div class="sixWheel"></div>

<div>
	<div id="haha" style="background: tomato;"></div>
</div>

<div id="imgimg">
<img src="img/app-banner.jpg">
</div>

<!-- <svg width="300" height="200" id="sss">

<polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
<polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>

</svg> -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
    <path fill="#1EB287">
    <animate 
             attributeName="d" 
             dur="1440ms" 
             repeatCount="indefinite"
             keyTimes="0;
                       .0625;
                       .208333333;
                       .3125;
                       .395833333;
                       .645833333;
                       .833333333;
                       1"
             calcMode="spline" 
             keySplines="0,0,1,1;
                         .42,0,.58,1;
                         .42,0,1,1;
                         0,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1"
             values="M 0,0 
                     C 50,0 50,0 100,0
                     100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     Z;

                     M 0,0 
                     C 50,0 50,0 100,0
                     100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     Z;

                     M 50,0 
                     C 75,25 75,25 100,50 
                     75,75 75,75 50,100
                     25,75 25,75 0,50
                     25,25 25,25 50,0
                     Z;

                     M 25,50 
                     C 37.5,25 37.5,25 50,0 
                     75,50 75,50 100,100
                     50,100 50,100 0,100
                     12.5,75 12.5,75 25,50
                     Z;

                     M 25,50 
                     C 37.5,25 37.5,25 50,0 
                     75,50 75,50 100,100
                     50,100 50,100 0,100
                     12.5,75 12.5,75 25,50
                     Z;

                     M 50,0
                     C 77.6,0 100,22.4 100,50 
                     100,77.6 77.6,100 50,100
                     22.4,100, 0,77.6, 0,50
                     0,22.4, 22.4,0, 50,0
                     Z;
                     
                     M 50,0
                     C 77.6,0 100,22.4 100,50 
                     100,77.6 77.6,100 50,100
                     22.4,100, 0,77.6, 0,50
                     0,22.4, 22.4,0, 50,0
                     Z;
                     
                     M 100,0 
                     C 100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     50,0 50,0 100,0
                     Z;"/>
  </path>
</svg>
<button id="addSession">添加一个sessionSotrage</button>
<div class="donut"></div>
<ol>
	<li>1</li>
	<li>2</li>
</ol>
<script>

var a = [{name: "林",age: "18"},{name:"陈"},{name: "李"}];
var a2 = {name: "林",age: "20"};
var a3 = ["1","2","3"];
var a4 = {};
var a5 = 10;

(function(){
	var a5 = 100;
	var i = 0;
	document.querySelector("#addSession").addEventListener("click",function(){
	console.log("触发了");
	// i++;
	// sessionStorage.setItem("ddd","dsd");
	// localStorage.setItem("ddd","dsd");
	// document.cookie = "userId"+i+"=age; expires=100";
	// console.log(document.cookie);
	setCookie('name','zzyn',1000);
});
})();

function outer(){
	var a15 = 200;
	return function(){
		a15++;
		return a15;
	};
	
}
var abc = outer();
console.log(abc());
console.log(abc());
console.log(abc());


function setCookie(c_name,value,expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    (!expiredays? "" : ";expires="+exdate.toGMTString())
}

var oDate = new Date();
oDate.setDate(24);
console.log(oDate);



var h = [1,2,3];
var j = [4,5,6];
var k = [];

if(1){
	console.log("有");
}else{
	console.log("没");
}

// var k = (function wai(){
// 	var k = 100;
// 	return function(){
// 		return k++;
// 	}
// })();
// k = null;







function deepClone(target){
	if(typeof target !== "object"){
		return;
	}
	var tem = toString.call(target) === "[object Object]"? {} : [];
	
	for(var i in target){

		if(target.hasOwnProperty(i)){
			if(typeof target[i] === "object"){
				tem[i] = deepClone(target[i]);
			}else{
				tem[i] = target[i];
			}
		}
		
	}
	return tem;
}

function deepCloneEasy(target){
	var tem = JSON.stringify(target);
	return JSON.parse(tem);
}


// b[0].sex = "男";
// Object.prototype.aaa = "我是一个aaa字符串";

// var b = deepClone(a2);
// console.log(b);






//传统的写法
	// var leftChange = 0;
	// function donghua(){
	// 	leftChange++;
	// 	document.querySelector(".in").style.left = leftChange+ "px";
	// 	if(leftChange === 300){
	// 		return;
	// 	}
	// 	setTimeout(donghua,30);
	// }

	// setTimeout(function(){
	// 	donghua();
	// },1000);
	// cancelAnimationFrame(timer);
    window.requestAnimationFrame = window.requestAnimationFrame ||
    								window.webkitRequestAnimationFrame ||
    								window.mozRequestAnimationFrame || 
    								function (callback){
    									setTimeout(callback,1000/60);
    								};

    (function(){
    	var leftChange = 0;
    	var timer = null;
    	var falg = true;
    	function render(){
    		if(falg){
    			leftChange++;
    			document.querySelector(".in").style.left = leftChange+ "px";
    			if(leftChange > 300){
    				falg = false;
    			}
    		}else{
    			leftChange--;
    			document.querySelector(".in").style.left = leftChange+ "px";
    			if(leftChange < 0){
    				falg = true;
    			}
    		}
    		
    	}
    	function go(){
    		render();
    		requestAnimationFrame(go);
    	}
    	go();
    })();

    for(var i=1;i<=9;i++){
    	for(var j = i; j<=9;j++){
    		console.log(i+"*"+j);
    	}
    }
	

	if(confirm("xxxxxxxxxxxx")){
		console.log("确定");
	}else{
		console.log("取消");
	}
	// alert("确认");
	console.log("sure?");


</script>
</body>
</html>